<template>
    <div class="box">
        <!-- 面包屑导航区 -->
        <t-breadcrumb :maxItemWidth="'150'">
            <t-breadcrumbItem :to="{ path: '/dashboard' }">首页</t-breadcrumbItem>
            <t-breadcrumbItem>权限管理</t-breadcrumbItem>
            <t-breadcrumbItem :maxWidth="'160'">权限列表</t-breadcrumbItem>
        </t-breadcrumb>

        <!-- 卡片视图区域 -->
        <t-card>
            <t-table rowKey="index" :data="rightsList" :columns="columns" stripe bordered hover resizable>
                <!-- 插槽方式 自定义单元格， colKey 的值默认为插槽名称  -->
                <template #level="{ row }">
                    <t-tag v-if="row.level === '0'" theme="primary">一级</t-tag>
                    <t-tag v-else-if="row.level === '1'" theme="success">二级</t-tag>
                    <t-tag v-else theme="warning">三级</t-tag>
                </template>
            </t-table>
        </t-card>
    </div>
</template>

<script>
export default {

    created() {
        // 获取所有的权限
        this.getRightsList()
    },

    data() {
        return {
            // 权限列表
            rightsList: [],
            columns: [
                { colKey: 'index', title: '#', width: '20' },
                { colKey: 'authName', title: '权限名称', width: '100' },
                { colKey: 'path', title: '权限路径', width: '100' },
                { colKey: 'level', title: '权限等级', width: '60' },
            ],

        }
    },

    methods: {
        // 获取权限列表
        async getRightsList() {
            const { data: res } = await this.$http.get('rights/list')
            if (res.meta.status !== 200) {
                this.$message.error('获取权限列表失败！')
            } else {
                this.rightsList = res.data
                this.rightsList.forEach((item, index) => {
                    item.index = index + 1;
                });
            }

        },
    },

}
</script>

<style lang="less" scoped>
.box {
    padding: 15px;
}
</style>